<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>My WebSocket</title>
  <style>
    #message {
      margin-top: 40px;
      border: 1px solid gray;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div>
    <span>昵称: </span>
    <input type="text" id="nickname">
  </div>
  <button onclick="conectWebSocket()">连接WebSocket</button>
  <button onclick="closeWebSocket()">断开连接</button>
  <hr />
  <br />

  <div>
    <span>targetName: </span>
    <input type="text" id="targetName">
  </div>

  <div>
    <span>消息: </span>
    <input id="text" type="text" />
  </div>
  <button onclick="send()">发送消息</button>
  <div id="message"></div>
</body>
<script type="text/javascript">

  var websocket = null;

  function conectWebSocket() {
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
      let nickname = document.getElementById("nickname").value
      if (nickname == null || nickname == "") {
        alert("请先输入昵称！")
        return
      }
      websocket = new WebSocket("ws://localhost:9000/websocket/" + nickname);
    } else {
      alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
      setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function (event) {
      setMessageInnerHTML("tips: 连接成功！");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
      setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
      setMessageInnerHTML("tips: 关闭连接");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
      websocket.close();
    }

  }

  //将消息显示在网页上
  function setMessageInnerHTML(innerHTML) {
    document.getElementById('message').innerHTML += innerHTML + '<br/>';
  }


  //关闭连接
  function closeWebSocket() {
    websocket.close();
  }

  //发送消息
  function send() {
    var message = document.getElementById('text').value;
    var targetName = document.getElementById('targetName').value;
    var chatMsg = {
      "targetName": targetName,
      "msg": message
    }
    websocket.send(JSON.stringify(chatMsg));
  }

</script>

</html>